<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><meta name="qrichtext" content="1" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css">
p, li { white-space: pre-wrap; }
</style></head><body style=" font-family:'MS Shell Dlg 2'; font-size:11pt; font-weight:400; font-style:normal;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:14pt; font-weight:600;">Playwright: полный гайд + FAQ</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-14px; margin-right:-14px; -qt-block-indent:0; text-indent:0px; line-height:28px; background-color:#f4f7fc;"><span style=" font-family:'Montserrat'; font-size:10px; font-weight:792; color:#828489; vertical-align:top; text-transform:uppercase;">АВТОР</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-14px; margin-right:-14px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a href="https://testengineer.ru/author/roman/"><span style=" font-family:'Muli'; font-size:12px; font-weight:696; text-decoration: underline; color:#000000; background-color:transparent; vertical-align:middle;">testengineer.ru</span></a></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-14px; margin-right:-14px; -qt-block-indent:0; text-indent:0px; line-height:28px;"><span style=" font-family:'Montserrat'; font-size:10px; font-weight:792; color:#828489; vertical-align:top; text-transform:uppercase;">ДАТА</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-14px; margin-right:-14px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><span style=" font-family:'Montserrat'; font-size:12px; font-weight:696; color:#222222; vertical-align:middle;">10 апреля, 2023</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">КАТЕГОРИЯ</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/category/obuchenie-testirovanie/automation-testing/"><span style=" text-decoration: underline; color:#0000ff;">АВТОМАТИЗИРОВАННОЕ ТЕСТИРОВАНИЕ</span></a></p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:12px; margin-right:12px; -qt-block-indent:0; text-indent:0px; line-height:0%; font-family:'Montserrat'; font-size:12px; font-weight:696; color:#000000; vertical-align:middle; text-transform:uppercase;"><br /></p>
<ul style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; -qt-list-indent: 1;"><li style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#ffffff;" style=" margin-top:40px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#what-is-playwright"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Что такое Playwright</span></a></li>
<ul style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; -qt-list-indent: 2;"><li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#Playwright-statistics"><span style=" font-size:16px; font-weight:600; text-decoration: underline; color:#ea6a56; background-color:transparent;">Сначала картинки</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#architecture"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Архитектура одной картинкой</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#architecture-vs-selenium"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Главнейшее отличие в архитектуре от Selenium</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#advantages"><span style=" font-size:16px; font-weight:600; text-decoration: underline; color:#ea6a56; background-color:transparent;">Плюсы и минусы</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:0px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#differences"><span style=" font-size:16px; font-weight:600; text-decoration: underline; color:#ea6a56; background-color:transparent;">Сравнение с другими фреймворками</span></a></li></ul>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#install"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Переходим к практике. Установка и настройка</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#howitworks"><span style=" font-size:16px; font-weight:600; text-decoration: underline; color:#ea6a56; background-color:transparent;">Туториал Playwright</span></a></li>
<ul style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; -qt-list-indent: 2;"><li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#locators"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Локаторы и действия</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#assertions"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Assertions</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#isolation"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Изоляция тестов</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#hooks"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Хуки</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#cli"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Командная строка</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#debug"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Дебаг</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#reports"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Репорты</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#codegen"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Генератор тестов</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#trace"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Трассировка</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:0px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#ci-github-actions"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">CI GitHub Actions</span></a></li></ul>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#best-practices"><span style=" font-size:16px; font-weight:600; text-decoration: underline; color:#ea6a56; background-color:transparent;">Советы и лучшие практики</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#puppeteer-migration"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Миграция с Puppeteer</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:26px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#playwright-faq"><span style=" font-size:16px; font-weight:600; text-decoration: underline; color:#ea6a56; background-color:transparent;">Приложение: ответы на все вопросы по Playwright</span></a></li></ul>
<ul style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; -qt-list-indent: 2;"><li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#functionality"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Функции</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#integration"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Интеграция</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#migration"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Миграция</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#platforms"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Платформы</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#availability"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Доступность</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#frameworks"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Другие фреймворки</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#design"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Дизайн</span></a></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:0px; margin-left:18px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><a href="https://testengineer.ru/playwright-tutorial/#maintenance"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Поддержка</span></a></li></ul>
<p style=" margin-top:30px; margin-bottom:20px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:38px;"><a name="what-is-playwright"></a><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">Ч</span><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">то такое Playwright</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Playwright — NodeJS-фреймворк для headless-браузерного тестирования. Основной фокус — на скорости и производительности e2e-автотестов. У Playwright и Puppeteer сходные названия («драматург» и «кукловод»), что должно намекать, что Playwright создан бывшей командой Puppeteer. </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a name="Playwright-statistics"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">С</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">начала картинки</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Популярность судя по </span><a href="https://npmtrends.com/@puppeteer/replay-vs-cypress-vs-nightwatch-vs-playwright-vs-puppeteer-vs-puppeteer-core-vs-selenium-vs-webdriverio"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">npm trends</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">:</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Популярность Playwright — npm trends</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Знают о Playwright только половина </span><a href="https://2022.stateofjs.com/ru-RU/libraries/testing/"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">опрошенных</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">:</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">The State of JS2022 — известность Playwright</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Пользуются — где-то 17%.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Каждый шестой — это много? Или мало?</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">The State of JS2022 — применение Playwright</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">А вот среди тех, кто пользовался, удовлетворенность неудержимо приближается к 100%:</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">The State of JS2022 — удовлетворенность Playwright</span></p>
<p style=" margin-top:30px; margin-bottom:20px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:38px;"><a name="architecture"></a><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">А</span><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">рхитектура в одной картинке</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Архитектура фреймворка Playwright (сложно)</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="architecture-vs-selenium"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">О</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">тличие в архитектуре от Selenium</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Архитектура Selenium упрощенно:</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Архитектура Selenium</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Selenium работает по HTTP-протоколу, то есть после запуска теста весь его код, написанный тобой на любимом языке в Selenium Client Library (на рисунке слева), конвертируется в JSON-формат, далее отправляется в драйвер браузера (Server) через HTTP-протокол, и работает с браузером, то есть тестирует.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Архитектура Playwright упрощенно:</p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Архитектура Playwright</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Playwright </span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">работает через протокол WebSocket, это значит что после запуска теста его код (тоже) конвертируется в JSON-формат и отправляется на сервер, (но) через WebSocket-протокол.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Разница между HTTP и WebSocket:</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Разница между WebSocket и HTTP</span></p>
<p style=" margin-top:24px; margin-bottom:14px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:29px;"><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">Подробнее:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Selenium отправляет каждую команду как отдельный HTTP-запрос и получает JSON-ответы. Таким образом, каждое действие (типа открытие браузера, нажатие элемента страницы, отправка текста из заполненной формы) — идет отдельным HTTP-запросом. Помимо того, после завершения каждого запроса подключение между сервером и клиентом будет закрыто; и должно быть снова открыто для отправки следующего запроса.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Это закрытие подключения после каждого запроса приводит к (иногда существенному) снижению скорости выполнения тестов, и «вводит слой возможной нестабильности» тестов.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Playwright же, отправляет-принимает все свои запросы через одно WebSocket-соединение, которое остается активным пока нужно, пока выполняются тесты. Что снижает количество «точек возможного отказа» и позволяет отправлять команды (то есть запросы) «пакетным способом», в одном подключении. Это быстрее и надежнее.</p>
<p style=" margin-top:30px; margin-bottom:20px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:38px;"><a name="advantages"></a><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">П</span><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">люсы</span></p>
<ul style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; -qt-list-indent: 1;"><li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:12px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Открытые исходники</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Бесплатность</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Простая установка и конфигурация</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Поддерживает все нужные браузерные движки</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">И все три ОС-платформы (MacOS, Windows, Linux)</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Все нужные ЯПы (Python, Java, JS, C#)</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Поддерживает тест-раннеры (Mocha, Jest, Jasmine)</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Сочетает headless-тестирование с event-driven архитектурой</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Интегрируется с инструментами CI/CD (Jenkins, CircleCI, Azure Pipeline, TravisCI)</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Подходит для сложных приложений</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Автоматические ожидания — не надо прописывать эксплицитное ожидание</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Функция auto-wait</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Параллельное выполнение в контекстах, когда много вкладок надо открыть одновременно</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Генерация тестов</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Есть удобный Reporter</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:26px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Возможности дебага</span></li></ul>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="h-"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">М</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">инусы</span></p>
<ul style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; -qt-list-indent: 1;"><li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:12px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Относительно новый продукт</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Не поддерживает IE, что впрочем уже не минус</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Не поддерживает нативные мобильные приложения (но есть же эмуляторы)</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:26px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Не очень большое комьюнити</span></li></ul>
<p style=" margin-top:30px; margin-bottom:20px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:38px;"><a name="differences"></a><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">Ч</span><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">ем отличается от других популярных фреймворков</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="install"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">У</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">становка</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Устанавливаем через npm:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npm init playwright@latest</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Далее:</span></p>
<ul style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; -qt-list-indent: 1;"><li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:12px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Указываем TypeScript или JavaScript (по умолчанию TypeScript)</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Даем название папке с тестами, или оставляем дефолтное </span><span style=" font-size:16px; font-style:italic;">tests</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">(Опционально) добавляем воркфлоу GitHub Actions</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:26px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Устанавливаем браузеры (по умолчанию)</span></li></ul>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Playwright загрузит нужные браузеры и создаст конфигурации:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">playwright.config.ts</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">package.json</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">package-lock.json</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">tests/</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  example.spec.ts</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">tests-examples/</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  demo-todo-app.spec.ts</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">В конфиг-файле </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">playwright.config</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;"> можно потом указать, какие браузеры будут запускаться. Если проект уже есть, зависимости в </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">package.json</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;"> добавятся автоматически.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">В папке </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">tests </span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">есть образец теста, который можно попробовать запустить; также папка </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">tests-examples</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;"> с тестами приложения-планировщика.</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="h--1"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">З</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">апуск примера</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">По умолчанию тесты запускаются в браузерах Chromium, Firefox, Webkit. Это можно настроить в конфиг-файле. Запуск в headless-режиме (окна не открываются). Результаты и логи — в терминале.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright test</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="h-html"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">H</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">TML-репорты</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">После выполнения теста создается репорт, который можно посмотреть по браузерам, по статусам pass/fail/skipped, и также по стабильности. По каждому тесту описываются этапы и ошибки. Репорт откроется автоматически если какие-то тесты упали.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">npx playwright show-report</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Репорт в Playwright</span></p>
<p style=" margin-top:30px; margin-bottom:20px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:38px;"><a name="howitworks"></a><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">К</span><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">ак работает Playwright</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">В Playwright тесты выполняют действия, и сравнивают состояния с ожидаемыми (assert-функциональность). </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Нет необходимости дополнительно прописывать wait-ожидания, так как Playwright автоматически ожидает результаты проверки перед тем как перейти к следующему действию; ожидания неплохо настроены, это позволяет забыть о таймаутах и некорректных ожиданиях, вызывающих нестабильность тестов.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"> настроены, это позволяет забыть о таймаутах и некорректных ожиданиях, вызывающих нестабильность тестов.</p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="h--2"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">П</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">ервый тест</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Ниже имеем пример:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">import </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> test, expect </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">}</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> from </span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'@playwright/test'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">test</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'has title'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">, </span><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">async</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">({</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> page </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> =</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">&gt;</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  await page.goto</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'https://playwright.dev/'</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">)</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  </span><span style=" font-family:'inherit'; font-size:16px; color:#999999;">// Expect a title &quot;to contain&quot; a substring.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  await </span><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">expect</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">page</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">)</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">.toHaveTitle</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">/Playwright/</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">)</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">test</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'get started link'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">, </span><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">async</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">({</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> page </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> =</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">&gt;</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  await page.goto</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'https://playwright.dev/'</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">)</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  </span><span style=" font-family:'inherit'; font-size:16px; color:#999999;">// Click the get started link.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  await page.getByRole</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'link'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">, </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> name: </span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'Get started'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">.click</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">()</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  </span><span style=" font-family:'inherit'; font-size:16px; color:#999999;">// Expects the URL to contain intro.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  await </span><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">expect</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">page</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">)</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">.toHaveURL</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">/.*intro/</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">)</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">Примечание: для JS-тестов в VS Code нужно будет добавить в начало каждого теста: @ts-check (автопроверка типов)</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="h--3"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">Н</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">авигация</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Как правило, веб-тесты начинаются с захода на какой-то URL:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">await page.goto</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'https://playwright.dev/'</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">)</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;"><br />Playwright ожидает, пока страница не завершит загрузку.</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="locators"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">В</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">заимодействия и локаторы</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Взаимодействие с элементом начинается с того что его нужно найти локатором. Playwright ожидает, пока элемент не перейдет в доступное состояние перед выполнением действия, поэтому отдельные wait’ы не нужны.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'inherit'; font-size:16px; color:#999999;">// Create a locator.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">const getStarted = page.getByRole</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'link'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">, </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> name: </span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'Get started'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#999999;">// Click it.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">await getStarted.click</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">()</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Это можно написать одной строчкой:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">await page.getByRole</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'link'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">, </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> name: </span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'Get started'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">.click</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">()</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="h--4"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">Б</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">азовые действия</span></p>
<table border="0" style=" margin-top:0px; margin-bottom:21px; margin-left:0px; margin-right:0px;" cellspacing="2" cellpadding="0"><thead>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Действие </span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Описание</span></p></td></tr></thead>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locator#locator-check"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">locator.check()</span></a></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">Проставить чекбокс</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locator#locator-click"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">locator.click()</span></a></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Клик на элементе</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locator#locator-uncheck"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">locator.uncheck()</span></a></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">Снятие чекбокса</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locator#locator-hover"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">locator.hover()</span></a></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Наведение на элемент</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locator#locator-fill"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">locator.fill()</span></a></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">Заполнение формы (</span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">быстрое</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">)</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locator#locator-focus"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">locator.focus()</span></a></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Фокус на элементе</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locator#locator-press"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">locator.press()</span></a></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">Нажатие кнопки</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locator#locator-set-input-files"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">locator.setInputFiles()</span></a></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Выбор файлов на передачу</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locator#locator-select-option"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">locator.selectOption()</span></a></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">Выбор в выпадающем списке</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locator#locator-type"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">locator.type()</span></a></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Заполнение формы (</span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">медленно, по одной букве</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">)</span></p></td></tr></table>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="assertions"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">A</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">ssertions</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">В Playwright тестовые assertions реализованы в форме функции expect. Вызывается expect(value) и указывается соответствующий матчер, например toEqual, toContain, toBeTruthy:</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">expect(success).toBeTruthy();</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Есть также асинхронные матчеры, ожидающие некоего условия. Например, код, ожидающий, когда страница получит имя ‘Playwright’:</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">await expect(page).toHaveTitle(/Playwright/);</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Список assertions в Playwright:</p>
<table border="0" style=" margin-top:0px; margin-bottom:21px; margin-left:0px; margin-right:0px;" cellspacing="2" cellpadding="0"><thead>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Assertion</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Проверка, что:</span></p></td></tr></thead>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-be-checked"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">expect(locator).toBeChecked()</span></a></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">Чекбокс проставлен</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-be-enabled"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">expect(locator).toBeEnabled()</span></a></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Элемент включен</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-be-visible"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">expect(locator).toBeVisible()</span></a></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">Элемент видимый</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-contain-text"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">expect(locator).toContainText()</span></a></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Элемент содержит текст</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-attribute"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">expect(locator).toHaveAttribute()</span></a></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">У элемента есть такой атрибут</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-count"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">expect(locator).toHaveCount()</span></a></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Список элементов указанной длины</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-text"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">expect(locator).toHaveText()</span></a></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">Элемент содержит такой текст</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-value"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">expect(locator).toHaveValue()</span></a></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Элемент имеет такое значение</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-title"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">expect(page).toHaveTitle()</span></a></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">Страница имеет такой тайтл</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-url"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">expect(page).toHaveURL()</span></a></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Страница имеет такой URL</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a href="https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">expect(page).toHaveScreenshot()</span></a></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">Тестраннер делает два скриншота, второй из них сравнивается с образцом</span></p></td></tr></table>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="isolation"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">И</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">золяция тестов</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Базируется на концепции фикстур, передаваемых в тест. Страницы изолируются по контекстам браузера, что эквивалентно новому профилю браузера, то есть каждый тест выполняется в новом окружении (даже если в одном браузере запускается много тестов).</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">test</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'basic test'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">, </span><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">async</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">({</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> page </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> =</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">&gt;</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  ...</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="hooks"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">Т</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">естовые хуки</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Применяются хуки типа test.describe для объявления группы тестов, и test.beforeEach и test.afterEach для выполнения до/после каждого теста. Есть также хуки test.beforeAll / test.afterAll, срабатывающие до/после всех тестов.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">import </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> test, expect </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">}</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> from </span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">&quot;@playwright/test&quot;</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">test.describe</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">&quot;navigation&quot;</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">, </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">()</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> =</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">&gt;</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  test.beforeEach</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">async</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">({</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> page </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> =</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">&gt;</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">    </span><span style=" font-family:'inherit'; font-size:16px; color:#999999;">// Go to the starting url before each test.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">    await page.goto</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">&quot;https://playwright.dev/&quot;</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">)</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  </span><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">test</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">&quot;main navigation&quot;</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">, </span><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">async</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">({</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> page </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> =</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">&gt;</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">    </span><span style=" font-family:'inherit'; font-size:16px; color:#999999;">// Assertions use the expect API.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">    await </span><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">expect</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">page</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">)</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">.toHaveURL</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">&quot;https://playwright.dev/&quot;</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">)</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="h--5"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">З</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">апуск тестов</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">По одному, группа тестов, или все; в одном или нескольких браузерах. По дефолту тесты запускаются в headless-режиме — окна не открываются, результаты выводятся в терминал.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">Есть </span><a href="https://playwright.dev/docs/getting-started-vscode"><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; text-decoration: underline; color:#ea6a56; background-color:transparent;">VS Code Extension</span></a><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">, для запуска тестов, вставки брейкпойнтов и отладки в IDE VS Code.</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="cli"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">К</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">омандная строка</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Запуск всех тестов:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright test</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Одного теста:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright test landing-page.spec.ts</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Нескольких тестов:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright test tests/todo-page/ tests/landing-page/</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Если в тестах в имени файла есть </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">landing </span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">или </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">login</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright test landing login</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Запуск тестов, содержащих тайтл:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright test -g </span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">&quot;add a todo item&quot;</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">В headed-режиме:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright test landing-page.spec.ts --headed</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">По отдельному проекту:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright test landing-page.ts --project=chromium</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="debug"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">Д</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">ебаг</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Так как Playwright это Node.js-библиотека, можно выполнять отладку используя console.log, или в IDE, или, что удобнее, в VS Code Extension. В Playwright есть Инспектор, где можно смотреть API-вызовы, логи отладки и локаторы.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Отладка всех тестов:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright test --debug</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Одного теста:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright test example.spec.ts --debug</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Начать отладку со строки, содержащей </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">test(</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;"> :</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright test example.spec.ts:</span><span style=" font-family:'inherit'; font-size:16px; color:#ff6600;">10</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> --debug</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Playwright debug</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="reports"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">Р</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">епорты</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">В Playwright есть Reporter для анализа результатов, по времени выполнения теста, и на каких браузерах. Фильтрация по пройденным/упавшим/пропущенным/нестабильным. Вывод отдельно по браузерам;через Поиск можно найти интересующий тест.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Репорты открываются после выполнения тестов:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright test</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Открываются автоматически, если среди тестов есть красные. Чтобы открыть репорты вручную:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright show-report</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Playwright — репорт</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Подробный репорт по каждому тесту — клик по имени. Доступна детальная информация по ошибке; также детальный просмотр каждого этапа теста и кода на этом этапе, и времени выполнения.</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Playwright — репорты</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">В проектах, созданных через create-playwright, HTML-репорты открываются автоматически. Если в конфигурации не прописаны HTML-репорты, или если команда show-report не работает, открыть репорт вручную командой: —reporter=html.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">npx playwright show-report --reporter=html</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="codegen"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">Г</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">енератор тестов</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Playwright умеет генерировать тесты. Откроет два окна: браузера, в котором происходит взаимодействие с контентом страницы, и Инспектора, в котором тесты записываются, копируются, корректируются и т.п.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a name="h-codegen"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">З</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">апуск Codegen</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">npx playwright codegen demo.playwright.dev/todomvc</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Запускаем Codegen и выполняем нужные действия в браузере. Система будет генерировать код этих действий. В Codegen будут созданы соответствующие селекторы. Как это работает — скриншот ниже; или лучше скачать к себе и посмотреть видео по <a href="https://user-images.githubusercontent.com/13063165/197979804-c4fa3347-8fab-4526-a728-c1b2fbd079b4.mp4"><span style=" text-decoration: underline; color:#0000ff;">этой ссылке</span></a>.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Playwright Codegen</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">После завершения действий в браузере нажимаем кнопку </span><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Record</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">, чтобы остановить запись действий, и копируем, кнопкой </span><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Copy</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">, сгенерированный код в редактор.</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="trace"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">Т</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">рассировка</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Есть </span><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Trace Viewer</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;"> для просмотра записанных трассировок; можно вернуться и пошагово проверить действия в тесте, то есть визуально проконтролировать, что происходило на каждом этапе.</span></p>
<p style=" margin-top:24px; margin-bottom:14px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:29px;"><a name="h--6"></a><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">З</span><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">апись трассировки</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">По умолчанию в конфиг-файле Playwright прописано создание архива trace.zip с трассировкой каждого теста. Трассировки начинаются после первого повторного запуска упавшего теста (значение on-first-retry). При работе в CI количество повторных запусков =2, при локальной работе =0. То есть трассировки будут записываться при первом повторном запуске упавшего теста (а не после первого запуска, и не после второго повторного запуска).</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'inherit'; font-size:16px; color:#999999;">// @ts-check</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">const </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> defineConfig </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">}</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> = </span><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">require</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'@playwright/test'</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">)</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">module.exports = </span><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">defineConfig</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">({</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  retries: process.env.CI ? </span><span style=" font-family:'inherit'; font-size:16px; color:#ff6600;">2</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; color:#2f6f9f;">:</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; color:#ff6600;">0</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">, </span><span style=" font-family:'inherit'; font-size:16px; color:#999999;">// set to 2 when running on CI</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  ...</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  use: </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">    trace: </span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'on-first-retry'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">, </span><span style=" font-family:'inherit'; font-size:16px; color:#999999;">// record traces on first retry of each test</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">}</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">,</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Тр</span>ассировки чаще запускаются в CI-окружении; в локальном окружении используются обычные методы отладки. При этом, можно пользоваться этой функцией и локально, включив ее командой —trace on</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">npx playwright test --trace on</p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="h--7"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">П</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">росмотр трассировок</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Просмотр действий в таймлайне — что изменилось после какого-то действия. Также лог сетевых событий при каждом действии. Создается снепшот DOM; можно открыть devtools и т.п.</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Playwright — трассировка</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="ci-github-actions"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">C</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">I GitHub Actions</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">При установке Playwright есть опция добавить </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">GitHub Actions</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">. При этом создастся файл </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">playwright.yml </span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">в папке</span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;"> .github/workflows</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;"> со всем нужным.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Тесты будут запускаться после </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">push</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">— и </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">pull</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">-реквестов в </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">main/master</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">. </span><a href="https://docs.github.com/en/actions/using-workflows/about-workflows"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Workflow </span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">установит все зависимости, установит сам Playwright, и запустит тесты. А также создаст HTML-репорт.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">name: Playwright Tests</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">on:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  push:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">    branches: </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">[</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">main, master</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">]</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  pull_request:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">    branches: </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">[</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">main, master</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">]</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">jobs:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">  test:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">    timeout-minutes: </span><span style=" font-family:'inherit'; font-size:16px; color:#ff6600;">60</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">    runs-on: ubuntu-latest</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">    steps:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">      - uses: actions/checkout@v3</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">      - uses: actions/setup-node@v3</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">        with:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">          node-version: </span><span style=" font-family:'inherit'; font-size:16px; color:#ff6600;">18</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">      - name: Install dependencies</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">        run: npm ci</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">      - name: Install Playwright Browsers</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">        run: npx playwright install --with-deps</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">      - name: Run Playwright tests</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">        run: npx playwright test</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">      - uses: actions/upload-artifact@v3</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">        </span><span style=" font-family:'inherit'; font-size:16px; color:#006699;">if</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">: </span><span style=" font-family:'inherit'; font-size:16px; color:#9999ff;">always</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">()</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">        with:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">          name: playwright-report</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">          path: playwright-report/</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">          retention-days: </span><span style=" font-family:'inherit'; font-size:16px; color:#ff6600;">30</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="h-push-github"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">С</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">оздание репозитория и push на GitHub</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Следует ознакомиться с инструкциями на Гитхабе и не забыть </span><a href="https://github.com/git-guides/git-init"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">инициализировать репозиторий</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;"> командой </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">git init</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">. Далее можно использовать стандартные add/commit/push на Гитхабе:</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Playwright — GitHub</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="h-workflow"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">W</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">orkflow</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Во вкладке Actions на GitHub — статус тестов (passed/failed):</span></p>
<p style=" margin-top:0px; margin-bottom:21px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:11px; font-style:italic; color:#444444;">Playwright — GitHub Actions</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="best-practices"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">С</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">оветы и лучшие практики</span></p>
<p style=" margin-top:24px; margin-bottom:14px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:29px;"><a name="h--8"></a><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">Т</span><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">естировать в первую очередь то, что видит пользователь</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Автоматизация тестов должна верифицировать приложение для пользы конечных пользователей, и не слишком углубляться в то, что пользователь никогда не видит и с чем никогда не взаимодействует. </span></p>
<p style=" margin-top:24px; margin-bottom:14px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:29px;"><a name="h--9"></a><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">М</span><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">аксимально изолировать тесты друг от друга</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Идеальный тест — максимально не зависящий от других тестов, со своим локальным хранилищем, сессиями, данными, кукисами и прочим. Это улучшает воспроизведение багов, не дает возможность возникнуть <a href="https://testengineer.ru/sobesedovanie-qa-trainee-junior/#cascade-bugs"><span style=" text-decoration: underline; color:#0000ff;">каскадным багам</span></a>. </p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br /></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a name="h--10"></a><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">М</span><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">еньше тестов, и больше сами тесты</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Так как дело касается e2e-тестов, то большие тесты это не так плохо. Даже если в них будет очень много действий и assertions. Лучше не «разносить» assertions по отдельным тестам, это замедлит выполнение и принесет мало пользы. </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a name="h-third-party"></a><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">И</span><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">збегать third-party-зависимостей</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Тестировать только то что можно проконтролировать; не ссылки на внешние сайты/серверы. Это, во первых, заберет время, а также будут проблемы с контентом/кукисами и прочим.</span></p>
<p style=" margin-top:24px; margin-bottom:14px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:29px;"><a name="h--11"></a><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">П</span><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">олезные функции локаторов</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Пользоваться полезными функциями локаторов: auto-waiting и retry, а также фильтрацией локаторов и их последовательностями:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;">const product = page.getByRole</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'listitem'</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">)</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">.filter</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">({</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> hasText: </span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'Product 2'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">;</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Лучше применять локаторы, устойчивые к изменениям в DOM:</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; background-color:transparent;"><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> page.getByRole</span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">(</span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'button'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;">, </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">{</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> name: </span><span style=" font-family:'inherit'; font-size:16px; color:#d44950;">'submit'</span><span style=" font-family:'inherit'; font-size:16px; color:#212529;"> </span><span style=" font-family:'inherit'; font-size:16px; font-weight:696; color:#999999;">})</span></p>
<p style=" margin-top:24px; margin-bottom:14px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:29px;"><a name="h-codegen-1"></a><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">Г</span><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">енерировать локаторы в Codegen</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Генератор тестов (Codegen) подбирает нужные локаторы, по их релевантности, тексту, и ID. </span></p>
<p style=" margin-top:24px; margin-bottom:14px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:29px;"><a name="h-vs-code-extension"></a><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">Г</span><span style=" font-family:'Montserrat'; font-size:medium; font-weight:600; color:#111111;">енерировать локаторы в VS Code Extension</span></p>
<p style=" margin-top:30px; margin-bottom:20px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:38px;"><a name="puppeteer-migration"></a><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">М</span><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">играция с Puppeteer</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">В целом не очень сложная. Синтаксис похож (с небольшими различиями например при запуске браузера).</p>
<table border="0" style=" margin-top:0px; margin-bottom:21px; margin-left:0px; margin-right:0px;" cellspacing="2" cellpadding="0"><thead>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Puppeteer</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Playwright</span></p></td></tr></thead>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await puppeteer.launch()</span></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await playwright.chromium.launch()</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">puppeteer.launch({product: ‘firefox’})</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await playwright.firefox.launch()</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">WebKit не поддерживается в Puppeteer</span></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await playwright.webkit.launch()</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await browser.createIncognitoBrowserContext(…)</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await browser.newContext(…)</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.setViewport(…)</span></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.setViewportSize(…)</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.waitForXPath(XPathSelector)</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.waitForSelector(XPathSelector)</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.waitForNetworkIdle(…)</span></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.waitForLoadState({ state: ‘networkidle’ }</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.$eval(…)</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Для верификации текста/атрибута/класса применяются Assertions</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.$(…)</span></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">Нежелательно, лучше использовать Locators</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.$x(xpath_selector)</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Нежелательно, лучше использовать Locators</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">Нет методов по чекбоксу или радиокнопке</span></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.locator(selector).check() await page.locator(selector).uncheck()</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.click(selector)</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.locator(selector).click()</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.focus(selector)</span></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.locator(selector).focus()</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.hover(selector)</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.locator(selector).hover()</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.select(selector, values)</span></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.locator(selector).selectOption(values)</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.tap(selector)</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.locator(selector).tap()</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.type(selector, …)</span></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.locator(selector).type(…) Также можно locator.fill(value[, options])</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.waitForFileChooser(…) await elementHandle.uploadFile(…)</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.locator(selector).setInputFiles(…)</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.cookies([…urls])</span></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await browserContext.cookies([urls])</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await page.deleteCookie(…cookies)</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">await browserContext.clearCookies()</span></p></td></tr>
<tr>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await page.setCookie(…cookies)</span></p></td>
<td bgcolor="#f0f0f0" style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444; background-color:#f0f0f0;">await browserContext.addCookies(cookies)</span></p></td></tr>
<tr>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">page.on(…)</span></p></td>
<td style=" padding-left:8; padding-right:8; padding-top:2; padding-bottom:2;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">page.on(…)для перехвата и изменения  запросов, см. page.route(url, handler[, options])</span></p></td></tr></table>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">page.waitForNavigation и page.waitForSelector те же. Однако, эти функции уже применяются реже, поскольку Playwright обновлён функцией <a href="https://playwright.dev/docs/actionability?ref=blog.apify.com"><span style=" text-decoration: underline; color:#0000ff;">auto-waiting</span></a>. Вместо прописывания условий и времени ожидания Playwright автоматически ожидает доступности нужных UI-элементов, и только тогда выполняет действие.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a name="playwright-faq"></a><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">P</span><span style=" font-family:'Montserrat'; font-size:x-large; font-weight:600; color:#111111;">laywright: FAQ</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Для тех кто не любит тратить время на видео. Вопросы и ответы на вебинаре (актуально для 2022 г). Вопросы разбиты по категориям. Отвечал </span><a href="https://ru.linkedin.com/in/aslushnikov"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Андрей Лушников из Microsoft</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">, один из создателей Playwright.</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="functionality"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">В</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">опросы по функциональности</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Способен ли Playwright определять проблемы с отзывчивостью интерфейса? Например с выпадающими списками при наведении мышкой.</span></p>
<ul style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; -qt-list-indent: 1;"><li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:12px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Можно измерить время вызова. В Playwright Trace можно сериализовать и отрабатывать это.</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">В Chromium трейсинг. Можно бросить этот файл в devtools и посмотреть производительность. </span><a href="https://playwright.dev/docs/next/api/class-browser#browserstarttracingpage-options"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Ссылка</span></a><span style=" font-size:16px;">. </span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:10px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Также тайминги по ресурсам: </span><a href="https://playwright.dev/docs/api/class-request#requesttiming"><span style=" font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">ссылка</span></a><span style=" font-size:16px;">.</span></li>
<li style=" font-family:'Montserrat'; font-size:16px; color:#444444;" style=" margin-top:0px; margin-bottom:26px; margin-left:-3px; margin-right:-24px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16px;">Работает в Java, Python и JS.</span></li></ul>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-weight:600;">Поддерживаются ли моки типа cy.intercept? Можно ли получить репорт по покрытию в Playwright? Есть ли что-то подобное cy.wait()? Можно ли запускать webkit-тест в контейнере как часть пайплайна?</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да. Подробнее </span><a href="https://playwright.dev/docs/network#handle-requests"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">здесь</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Дает ли Playwright доступ к окнам отображаемым браузером, не только страницами? (типа окна загрузки)</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да, об этом </span><a href="https://playwright.dev/java/docs/downloads"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">здесь</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">. Есть API для приема/отказа/обработки загрузок. Можно отрабатывать диалог передачи/загрузки файла, а также вставлять файлы в input-элементы.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Когда страница открывается через контекст браузера, она рендерится с GUI или в headless-режиме?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">С точки зрения рендеринга нет разницы между headless- и headful-режимами.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Playwright поддерживает Salesforce iFrames?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да, поддерживает в браузерах на основе Chromium, подробнее </span><a href="https://www.chromium.org/developers/design-documents/oop-iframes"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">здесь</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Какое стандартное время ожидания загрузки элемента в Playwright?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">По дефолту 30 секунд. Таймаут может быть прописан локально или глобально. Подробнее </span><a href="https://playwright.dev/docs/actionability"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">здесь</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Может ли Playwright находить элементы по ID?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да. </span><a href="https://playwright.dev/docs/selectors"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Подробнее</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;"> о селекторах. </span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Можно ли запускать тесты параллельно?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да, тест-раннеры типа pytest и Jest умеют запускать Playwright-тесты параллельно.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Можно ли отображать курсор при записи видео?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Пока нет. Если очень хотите, сделайте соответствующий </span><a href="https://github.com/microsoft/playwright/issues/new?assignees=&amp;labels=&amp;template=feature_request.md&amp;title=%5BFeature%5D"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">реквест на GitHub</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Являются ли assertions нативными в Playwright? Или берутся в Jest?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">В большинстве примеров взята expect-библиотека из Jest, но это на ваше усмотрение.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как имплементируются Data-Driven-методы? Как скрипт получает внешние данные? Как проводятся множественные итерации с наборами данных?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Это больше касается тест-раннера. В разных тест-раннерах есть свои API для этого.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Есть ли в Playwright функция для работы с canvas?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Нет, ничего такого. Можно кликнуть в рендомном месте и вручную что-то ввести, но ничего специального по canvas.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Действия, если нужно кликнуть отключенную (disabled) кнопку? Какая в Playwright wait-стратегия — есть ли таймаут?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Будет ждать таймаута — </span><a href="https://playwright.dev/docs/actionability."><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">подробнее</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как запустить набор тест-кейсов с разными файлами?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Это зависит от тест-раннера: jest-playwright, cucumber и пр.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Элемент должен быть в видимой области (вьюпорте), чтобы иметь активный статус?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Нужно промотать до места элемента. И убедиться, что он не заслонен чем-то.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Делается ли детальное протоколирование (verbose logging) того что делал Playwright перед тем как тест упал?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да. О verbose-логах </span><a href="https://playwright.dev/docs/debug#verbose-api-logs"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">здесь</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">. </span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как выводятся ошибки при падении теста?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">В форме эксепшенов, с детальными логами действий.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Есть ли какая-то поддержка мультитрединга?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Нет, ничего такого. Тест-раннер делит тестовые процессы.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как работает Auto-Waiting? Если кнопка активирована после запроса, нужно ли это постоянно проверять? Каждые ‘x’ секунд, и таймаут каждые ‘y’ секунд?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да, примерно так. </span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Есть метод </span><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; font-style:italic; color:#444444;">waitForNavigate</span><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">, как он имплементируется?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Проще говоря, </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">waitForNavigation </span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">ожидает любое действие навигации.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">А зачем нужен </span><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; font-style:italic; color:#444444;">waitForNavigation</span><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">, если есть механизм auto-wait?</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Для случаев, когда нужно именно ожидание действия навигации. Например заполняется большая форма на нескольких страницах, на каждой страница кнопка «Далее». Если нужно кликнуть «Далее» на первых двух страницах, можно применить waitForNavigation после первого клика и перед вторым, чтобы не кликать два раза первую кнопку.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Что насчет автоматизации анимированных элементов, типа WebGL? Поддерживаются? </span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">WebGL это просто canvas-элемент, поэтому с ним работаем через мышу и скрипт на JS. Нет специальной поддержки WebGL.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Планируется ли поддержка компонентного тестирования в Playwright?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Пока не знаем, но можете </span><a href="https://github.com/microsoft/playwright/issues/new?assignees=&amp;labels=&amp;template=feature_request.md&amp;title=%5BFeature%5D"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">сделать запрос</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Чем отличается параллельный запуск тестов в Playwright и Cypress?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Это больше зависит от тест-раннера, а не от Cypress или Playwright.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Годится ли Playwright для тестирования API?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Некоторые компании тестируют API и производительность, там где им нужно протестировать паттерны реальных пользователей, но лучше все-таки специализированные инструменты для тестирования API.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как Playwright обрабатывает (обходит) ошибку SSL-сертификата?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Ставим настройку «Игнорировать все ошибки HTTPS», подробнее </span><a href="https://playwright.dev/docs/api/class-browser?_highlight=ignorehttps#browsernewcontextoptions"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">здесь</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как Playwright определяет, что страница уже загрузилась?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Playwright не определяет это в явном виде, но это и не особо нужно. Вместо этого ждем когда нужный элемент будет доступен, например кнопка </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">page.click(‘text=Submit’)</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">, так проще.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Есть ли ожидание, перехват и парсинг HTTP-запросов (например API), когда страница загружена или изменена в фоновом режиме?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да. </span><a href="https://playwright.dev/docs/network#handle-requests"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Здесь </span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">подробно.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Работает ли Playwright асинхронно по умолчанию? То есть нужно ли прописывать async/await эксплицитно?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Это зависит от языка. </span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как работать с Playwright Inspector в Visual Studio Code?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Нужно выбрать или то, или другое, зависит от ситуации.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Есть ли аналог </span><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; font-style:italic; color:#444444;">cy.click({force:true})</span><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;"> в Playwright? Она интегрирована в Auto Wait?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да, такое есть, это </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">page.click({ force: true })</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">. </span><a href="https://playwright.dev/docs/api/class-page#pageclickselector-options"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Подробнее</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-weight:600;">Иногда нужно ждать полной загрузки страницы, чтобы сделать скриншот. В одностраничном приложении (SPA) функции waitForNavigation и waitForLoadState могут работать не идеально. Остается waitForSelector?</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да, точно. Только визуальный критерий.</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="integration"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">В</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">опросы по интеграции</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как Playwright работает с Continuous Integration?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Этому посвящен подробный раздел в </span><a href="https://playwright.dev/docs/ci"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">документации</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как с Playwright интегрируются тестовые библиотеки типа JUnit и TestNG?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Отлично интегрируются, и большинство клиентов так делают.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Есть ли возможность интеграции с инструментом параллельного тестирования zalenium?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Нет, это не очень распространенный инструмент.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Есть ли интеграция с Cucumber?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Частичная — </span><a href="https://tally-b.medium.com/e2e-testing-with-cucumber-and-playwright-9584d3ef3360"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">E2E Cucumber+Playwright</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Есть ли интеграция с TestRail?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да, можно почитать об этом </span><a href="https://support.testrail.com/hc/en-us/articles/9682231778324-Integrating-with-Playwright"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">здесь</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Есть ли GitHub Action для запуска в облаке?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><a href="https://playwright.dev/docs/ci#github-actions"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Да</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Assertions в Playwright являются уникальными, или зависят от assertion-библиотеки типа Chai?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">В чистом виде нет, но для этого предназначена аналогичная Playwright-функция Expect [прим. — описано в туториале], или Chai.</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="migration"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">В</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">опросы по миграции</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Мы пользуемся стеком Jest-Puppeteer-Cucumber (TypeScript). Есть ли инструмент легкой миграции на Playwright?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Нет, но API для базовых операций практически тот же. Скорее всего нужно будет просто удалить несколько </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">waitForSelectors </span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">и все будет работать.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Нужно ли будет переделывать наш фреймворк на основе Selenium WebDriver?</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Если у вас современный CI/CD, Playwright будет работать «из коробки», используя например <a href="https://playwright.dev/docs/ci#github-actions"><span style=" text-decoration: underline; color:#0000ff;">GitHub Actions</span></a>. Но если у вас локальный Selenium grid, нужно будет расширить ваш фреймворк, чтобы Playwright мог работать с вашей фермой браузеров. Затем можно постепенно мигрировать.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a name="platforms"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">В</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">опросы по платформам</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Планируется ли поддержка мобильных приложений? Нативных, гибридных?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Есть </span><a href="https://playwright.dev/docs/api/class-android"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">поддержка Android в экспериментальном режиме</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">, браузеров и WebView. По iOS ничего нет, но можно </span><a href="https://github.com/microsoft/playwright/issues/1122"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">поддержать идею на GitHub</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Есть ли что-то подобное Selenium Grid, опенсорсное, работающее с Playwright? Если нет, то планируется?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Наши API дают доступ к функциональности Playwright сторонним приложениям типа Selenium Grid, пока этого достаточно.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как Playwright работает с браузером? Через HTTP-запросы?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Playwright работает через протокол удаленной отладки (типа CDP в Chromium).</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Поддерживается ли Safari?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да, Safari основан на WebKit, одном из 3 </span><a href="https://playwright.dev/docs/browsers."><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">движков </span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">которые поддерживаются.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Есть ли ограничения по версиям браузеров?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Поддерживаются последние версии браузеров: стабильные, и беты Chromium и Firefox, а также Safari Technology Preview. </span><a href="https://playwright.dev/docs/browsers"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Подробнее</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как насчет старых версий браузеров Chrome, IE и пр.?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Google и Microsoft стараются ограничивать загрузки старых браузеров и заставляют обновлять их. Чтобы поработать со старыми версиями, нужна старая версия Playwright.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Почему Chrome запускается в инкогнито-режиме?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Для изоляции контекста браузера.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Стоит ли у вас цель сделать all-in-one-фреймворк для веб, мобайла и десктопа? И что насчет облачного тестирования?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">На данный момент фокусируемся только на вебе. Но есть экспериментальные </span><a href="https://playwright.dev/docs/api/class-android"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Android </span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">и </span><a href="https://playwright.dev/docs/api/class-electron"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Electron</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="availability"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">В</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">опросы по доступности</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Playwright с открытым кодом или платный?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">С открытым кодом, бесплатный.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Playwright поддерживает Node.js и JavaScript?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Поддерживает JavaScript, TypeScript, Java, Python, Python asyncIO, и C# (альфа). </span><a href="https://playwright.dev/docs/languages"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Подробнее</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Умеет ли генератор кода в Playwright писать код на ES6 JS?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Только ES5, но со временем будет ES6.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Генератор поддерживает TypeScript?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Генерируемый ES5-код является валидным TypeScript-кодом. Нет методов в сгенерированных сниппетах.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Playwright поддерживает JavaScript?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да, </span><a href="https://playwright.dev/docs/intro"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">с самого начала</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Поддерживаются множество языков, но какой рекомендуете?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Тот, который удобен вам. Скорее всего это JavaScript )</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">У нас стек состоит из Cypress, TestCafe, Jest/Puppeteer, Playwright и других. На чем остановиться?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Обратите внимание на Playwright API </span><a href="https://playwright.dev/docs/api/class-page)"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">здесь</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">, на множество браузеров которые поддерживаются в Playwright, и тестовое покрытие которое дает Playwright. </span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Будет ли поддерживаться язык Dart?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Поддержите </span><a href="https://github.com/microsoft/playwright/issues/new?assignees=&amp;labels=&amp;template=feature_request.md&amp;title=%5BFeature%5D"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">реквест на GitHub</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">. Если будет много звезд, то да.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как конвертировать сниппеты кода? Например из JS в Python и наоборот.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Нет, такое не поддерживается, мы только генерируем, но не конвертируем.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-weight:600;">Мой вопрос о создании фреймворка автоматизации на Java, корпоративного уровня. Как будет развиваться Java Playwright? Будут ли сниматься ограничения по применению Selenium в JS-приложениях.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Вообще, Playwright намного мощнее, чем WebDriver-решения, и наша Java-версия вполне на уровне. Планируем постепенно убирать ограничения.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Если API имплементированы на C#/Java, будет ли ОК использовать JavaScript в тестах Playwright? Или лучше все-таки на C#/Java.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Никак не зависит. Многие пишут автотесты на JavaScript и Python для тестирования программ на Java/C#.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Что лучше для Playwright? Jest или Folio?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Связка Jest-Playwright отличная, но </span><a href="https://github.com/microsoft/folio"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Folio </span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">кажется лучше. [Примечание от 2023: проект Folio объединен с Playwright Test.]</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Релизы Playwright синхронизируются с WebKit, обновлениями Chrome, WebDriver?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Playwright релизится ежемесячно.</span></p>
<p style=" margin-top:27px; margin-bottom:17px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:30px;"><a name="frameworks"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">В</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">опросы по другим фреймворкам</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Чем Playwright отличается от TestCafe?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Сильно отличается, и в лучшую сторону. Playwright умеет делать например </span><a href="https://playwright.dev/docs/api/class-page"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">вот такое</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Все вокруг говорят о no-code-автоматизации. Что по Playwright?</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Мы рассматриваем Playwright как фундаментальный продукт. Его API стоит на script-based-тестировании, но теоретически можно делать намного больше, по крайней мере что касается кроссбраузерного тестирования. Возможно, в будущем появятся no-code-решения на «фундаменте» Playwright.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Чем, по большому счету, Playwright отличается от Cypress?</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Playwright поддерживает все браузерные движки, в нем больше функций чем в Cypress (сеть, прокси, мобайл, эмуляция), и Playwright работает с браузером напрямую. И у нас традиционная модель программирования (а не цепочка из API).</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a name="design"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">В</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">опросы по дизайну</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Используется ли что-то подобное Page Object Model? Чтобы избегать hard-coded значений для объектов.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Сценарий Playwright является программой, и ведет себя как программа, включая параметры, переменные и пр. </span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Какие рекомендуете паттерны дизайна автотестов в Playwright (как Page Object Model в Selenium).</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Page Object Model прекрасно работает и в Playwright, как и другие дизайн-паттерны. </span><a href="https://applitools.com/blog/playwright-java/"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Пример</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">С точки зрения архитектуры Playwright, нормально ли применять Page Object Model или Screenplay?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Playwright является библиотекой, поэтому можно применять любые программы и паттерны «поверх» Playwright.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Как имплементировать POM на JavaScript, и как генерировать исполняемый файл?</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">В Node.js не генерируется исполняемый файл, а пишется программа и выполняется при помощи ‘node script.js’. Не обязательно применять Node.js если это не любимый язык, Playwright работает и с Java, и с Python.</p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><a name="maintenance"></a><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">В</span><span style=" font-family:'Montserrat'; font-size:large; font-weight:600; color:#111111;">опросы по комьюнити и поддержке</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Подскажите хорошее комьюнити по Playwright.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><a href="https://aka.ms/playwright-slack"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Slack-канал</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">, например.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Есть ли ресурсы по Playwright Java?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><a href="https://aka.ms/playwright-slack"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Slack-канал</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">, и выбрать канал </span><span style=" font-family:'Montserrat'; font-size:16px; font-style:italic; color:#444444;">-java</span><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">. Проблемы — на </span><a href="https://github.com/microsoft/playwright-java"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">GitHub</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">.</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; font-weight:600; color:#444444;">Кому принадлежат права на Playwright? Microsoft? Будет ли продукт поддерживаться в будущем?</span></p>
<p style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;">Да, разработан в департаменте Microsoft Developer Vision. Там же создавались Visual Studio, Visual Studio Code, .NET и Azure. Будет поддерживаться, это одно из ключевых направлений.</span></p>
<p align="right" style=" margin-top:0px; margin-bottom:26px; margin-left:-24px; margin-right:-24px; -qt-block-indent:0; text-indent:0px; line-height:1.6%;"><a href="https://applitools.com/blog/top-playwright-questions-answered/"><span style=" font-family:'Montserrat'; font-size:16px; text-decoration: underline; color:#ea6a56; background-color:transparent;">Источник</span></a><span style=" font-family:'Montserrat'; font-size:16px; color:#444444;"> FAQ</span></p></body></html>